<template>
  <div style="height: 100%; width: 100%; position: relative">
      <div class="pagetop">
          <table class="table2style" style="width: 100%; font-size: 12px" border="0">
              <col style="width: 2%" />
              <col style="width: 15%" />
              <!-- <col style="width: 10%" /> -->
              <col style="width: 60%" />
              <tr>
                  <td style="text-align: right;width: 80px">日期区间</td>
                  <td>
                      <el-date-picker v-model="sel_startdt" :able="false" type="date" placeholder="选择日期" value-format="yyyy-MM-dd" style="width: 130px" :clearable="false" @change="clearTableData"> </el-date-picker>至 <el-date-picker v-model="sel_enddt" type="date" :able="false" placeholder="选择日期" value-format="yyyy-MM-dd" style="width: 130px" :clearable="false" @change="clearTableData"> </el-date-picker>
                  </td>
                  <td colspan="2" align="right">
                      <el-button icon="el-icon-search" v-has="'PINQUERY'" type="primary" @click="btnQuery">查询</el-button>
                      <el-button icon="el-icon-upload2" v-has="'PEXPORT'" @click="BtnExport">导出</el-button>
                  </td>
              </tr>
          </table>
      </div>
      <div class="pagecenter">
          <!-- @current-change="CurrentChangeEvent"  -->
          <vxe-table ref="lxTable" :data.sync="mainTableData" :loading="bLoading" class="table2style" height="auto" border size="mini" :sort-config="{ trigger: 'cell' }" resizable stripe highlight-current-row header-align="center" show-overflow show-footer :footer-method="footerMethod" :cell-class-name="cellClassName">
              <vxe-table-column type="index" title="NO." width="40" header-align="center" align="center"></vxe-table-column>
              <vxe-table-column field="instrid" title="仪器ID" width="80" align="center"></vxe-table-column>
              <vxe-table-column field="instrname" title="仪器名称" width="130"></vxe-table-column>
              <vxe-table-column field="rpt_itemcode" title="项目代码" width="100" header-align="center" align="left"></vxe-table-column>
              <vxe-table-column field="rpt_itemname" title="项目名称" width="180" header-align="center" align="left"></vxe-table-column>
              <vxe-table-column field="cv" title="总计CV" width="80" header-align="center" align="right"></vxe-table-column>
              <vxe-table-column field="maxcv" title="允许最大CV" width="80" header-align="center" align="right"></vxe-table-column>
              <vxe-table-column field="pass" title="满足" width="80" header-align="center" align="center"></vxe-table-column>
          </vxe-table>
      </div>
  </div>
</template>

<script>
import rmLayoutRight from "../../../rmcompents/rm-layout-right.vue";
import XE from "xe-utils"; //引入工具类

export default {
  components: { rmLayoutRight },
  name: "LIS543",
  data() {
      return {
          sel_startdt: XE.toDateString(new Date(), "yyyy-MM-01"),
          sel_enddt: XE.toDateString(new Date(), "yyyy-MM-dd"),
          ishaverptitem: "1",
          mainTableData: [],
          detailTableData: [],
          bLoading: false,
          rightLoading: false,
          allrptitemcnt: 0,
          allqcitemcnt: 0,
          allqcrate: "0.00%",
          unquaildata: [],
          bunquaildlg: false,
          setcnt: 0,
          overcnt: 0,
      };
  },
  created() {},
  methods: {
      cellClassName({ column, row }) {
          if (column.property == "pass") {
              if (row.pass == "满足") {
                  return "colgreen";
              } else if (row.pass == "超出") {
                  return "colred";
              }
          }
      },
      rCellDblClick({ row, column }) {
          this.unquaildata = [];
          this.selrow = row;
          if (XE.toInteger(row.rptitemcnt) == 0) {
              this.$message.info("请选择有效数据查询");
              return false;
          }
          this.bunquaildlg = true;
          this.$tool
              .request({
                  url: "LIS/LIS5/LIS543",
                  method: "post",
                  data: {
                      action: "querydetail",
                      startdt: this.sel_startdt,
                      enddt: this.sel_enddt,
                      labgroupid: row.labgroupid,
                  },
              })
              .then((res) => {
                  if (res.dt && res.dt.length > 0) {
                      this.unquaildata = res.dt;
                  }
              })
              .catch((e) => {});
      },
      btnQuery() {
          this.mainTableData = [];
          this.detailTableData = [];
          this.setcnt = 0;
          this.overcnt = 0;
          this.allqcrate = "0.00%";
          this.bLoading = true;
          this.$tool
              .request({
                  url: "LIS/LIS5/LIS543",
                  method: "post",
                  timeout: 600000,
                  data: {
                      action: "query",
                      startdt: this.sel_startdt,
                      enddt: this.sel_enddt,
                      ishaverptitem: this.ishaverptitem,
                  },
              })
              .then((res) => {
                  if (res.dt != null && res.dt.length > 0) {
                      var tempdt = [];
                      res.dt.forEach((e) => {
                          if (e.cv != null) {
                              e.cv = e.cv.toFixed(4);
                              tempdt.push(e);
                              this.setcnt++;
                              if (e.cv > e.maxcv) this.overcnt ++;
                          }
                      });
                      this.mainTableData = tempdt;
                  } else {
                      this.$refs.lxTable.setCurrentRow(null);
                      this.detailTableData = [];
                  }
                  this.bLoading = false;
              })
              .catch((e) => {
                  this.$alert(e, "error");
                  this.bLoading = false;
              });
      },
      CurrentChangeEvent({ row, column }) {},
      BtnExport() {
          let options = {
              filename: "LIS543 CV项目统计.csv",
          };
          this.$refs.lxTable.exportCsv(options);
      },
      clearTableData() {
          this.mainTableData = [];
          this, (this.detailTableData = []);
      },
      footerMethod({ columns, data }) {
          return [
              columns.map((column, columnIndex) => {
                  if (columnIndex === 0) {
                      return "统计";
                  }
                  if (["rpt_itemname", "cv", "maxcv", "pass"].includes(column.property)) {
                      if (column.property == "rpt_itemname") {
                          return "有规定的项目数";;   
                      } 
                      if (column.property == "cv") {
                          return   this.setcnt;
                      }
                      if (column.property == "maxcv") {
                          return "高于规定";
                      }
                      if (column.property == "pass") {
                          return   this.overcnt;
                      }
                  }
                  return null;
              }),
          ];
      },
  },
};
</script>

<style scoped>
table {
  font-size: 12px;
  border-collapse: separate;
  border-spacing: 5px;
}
::v-deep .vxe-table.t--border .vxe-header--column {
  border-bottom: 1px solid #cccccc;
}

.table2style tr td {
  white-space: nowrap;
}
.pagetop {
  width: 100%;
  /* height: 36px; */
  display: -webkit-box;
  -webkit-box-pack: center;
  -webkit-box-align: center;
  position: absolute;
  z-index: 99;
  border: 1px solid #ccc;
  text-align: left;
}
::-webkit-scrollbar {
  width: 15px;
  height: 15px;
  border: 4px solid white;
}
::-webkit-scrollbar-thumb {
  background-color: #c1c1c1;
}
::-webkit-scrollbar-track {
  background-color: #f1f1f1;
}
/* Buttons */
::-webkit-scrollbar-button:single-button {
  background-color: #bbbbbb;
  display: block;
  border-style: solid;
  height: 5px;
  width: 5px;
}
/* Left */
::-webkit-scrollbar-button:horizontal:decrement {
  margin-right: 2px;
  border-width: 2px 0px 2px 0;
  border-color: #f1f1f1 #505050 #f1f1f1 #f1f1f1;
  background-color: #000000;
}
::-webkit-scrollbar-button:horizontal:decrement:hover {
  border-color: #d2d2d2 #505050 #d2d2d2 #d2d2d2;
}
/* Right */
::-webkit-scrollbar-button:horizontal:increment {
  margin-left: 2px;
  border-width: 2px 0 2px 4px;
  border-color: #f1f1f1 #f1f1f1 #f1f1f1 #505050;
  background-color: #000000;
}
::-webkit-scrollbar-button:horizontal:increment:hover {
  border-color: #d2d2d2 #d2d2d2 #d2d2d2 #505050;
}

.cut {
  width: 20px;
  background-color: #fff;
  background-image: none;
  border-radius: 0px;
  border: 1px solid #dcdfe6;
  height: 28px;
  line-height: 27px;
}
.search-param {
  display: flex;
}
.search-title {
  width: 50px;
  text-align: right;
}

.pagecenter {
  position: absolute;
  top: 45px;
  width: 100%;
  left: 0;
  bottom: 5px;
}
.search-param_text {
  margin-left: 5px;
}
.search-param .el-input {
  width: 120px;
}
.search-param .el-input--small .el-input__inner {
  height: 26px !important;
  line-height: 26px !important;
}
.search-btn {
  float: right;
  /*margin: 5px 5px 0 0;*/
  margin-left: 95px;
  text-align: right;
}
.page-bottom {
  margin-top: 108px;
  position: absolute;
  font-size: 12px;
  width: 100%;
  height: calc(100% - 108px);
}
::v-deep .colred {
  background-color: red !important;
}
::v-deep .colgreen {
  background-color: #00ff00 !important;
}
</style>